<template>
    <div id="app">
        <div class="app">
            <tab-bar v-show="this.$route.meta.showTabBar"> </tab-bar>
            <router-view></router-view>
            <play-music v-show="this.$route.meta.showTabBar"></play-music>
            <news @shareNews="shareNews" v-if="newsIndex !== -1"></news>
            <transition name="slide">
                <player @shareMusic="shareMusic" v-if="player"></player>
            </transition>
            <share @closeShare="closeShare" :id="shareId" v-if="share" />
            <audio src="" @timeupdate="timeUpdate()"></audio>
        </div>
    </div>
</template>

<script>
import { progress } from "assets/js/canvas.js";
import { mapState } from "vuex";
import TabBar from "components/content/tabbar";
import PlayMusic from "components/content/playmusic";
import Player from "components/common/player";
import Share from "components/common/share";
import News from "components/common/news";

export default {
    name: "app",
    data() {
        return {
            player: false,
            share: false,
            shareId: "",
        };
    },
    components: { TabBar, PlayMusic, Player, News, Share },
    methods: {
        //播放时间函数
        timeUpdate() {
            let audio = document.getElementsByTagName("audio")[0];
            let currentTime = audio.currentTime.toFixed(2);
            //如果打开播放器，初始化canvas进度条
            if (this.player) {
                progress();
            }
            //当前播放时间超过了时间数组第一个值，将数组unshift
            if (currentTime >= this.timeArr[0]) {
                this.$store.commit("getLyricIndex");
            }
            //如果播放完成，判断是否是最后一首歌曲
            if (audio.ended) {
                if (this.currentIndex === this.playList.length - 1) {
                    this.$store.dispatch("musicInit", 0);
                } else {
                    this.$store.dispatch("musicInit", this.currentIndex + 1);
                }
            }
        },
        shareMusic(id) {
            if (!this.login) {
                this.$notify({ type: "warning", message: "请先登录" });
                this.player = false;
                this.$router.push("/signin");
                return;
            }
            if (!id) {
                return;
            }
            this.share = true;
            this.shareId = id;
        },
        shareNews(id) {
            if (!this.login) {
                this.$notify({ type: "warning", message: "请先登录" });
                this.$store.commit("newsIndex", -1);
                this.$router.push("/signin");
                return;
            }
            if (!id) {
                return;
            }
            this.$store.commit("newsIndex", -1);
            this.share = true;
            this.shareId = id;
        },
        closeShare() {
            this.share = false;
        },
    },
    computed: mapState([
        "currentIndex",
        "playList",
        "timeArr",
        "newsIndex",
        "login",
    ]),
    created() {},
    mounted() {
        this.$store.dispatch("initMusic");
        this.$store.dispatch("initNews");
        let token = localStorage.getItem("token");
        if (token) {
            this.$store.dispatch("readMsg");
        }
    },
};
</script>
<style lang="less">
@import "assets/css/base.css";
.app {
    position: relative;
    display: flex;
    height: 100vh;
    overflow-y: scroll;
    flex-direction: column;
}
</style>
